<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="style/temp.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic,900,900italic"
        rel="stylesheet">
</head>

<body>
    <section class="device">
        <div class="list" data-lists="3">
            <div class="music-list" data-path="/audio/1.mp3" data-index="0">
            </div>
            <div class="music-list" data-path="/audio/2.mp3" data-index="1">
            </div>
            <div class="music-list" data-path="/audio/3.mp3" data-index="2">
            </div>
            <div class="device__top">
                <img class="album-art"
                    src="./images/2.jpg"
                    alt="album art" />
                <img class="album-art"
                    src="./images/1.jpg"
                    alt="album art" />
                <img class="album-art"
                    src="./images/4.jpg"
                    alt="album art" />
            </div>
            <div class="device__mid">
                <div class="info">
                    <hgroup class="info__left">
                        <h1 class="info__song">
                            <span class="song">Me & You</span>
                            <span class="song">Dawn</span>
                            <span class="song">Home</span>
                        </h1>
                        <h2 class="info__artist">
                            <span class="artist">Alex Skrindo - Me & You</span>
                            <span class="artist">Skylike - Dawn</span>
                            <span class="artist">Jordan Schor - Home</span>
                        </h2>
                    </hgroup>

                    <hgroup class="info__right">
                        <h1 class="info__type">Playlist <span id="current-song">1</span> of 3</h1>
                        <h2 class="info__type-name">My faves</h2>
                    </hgroup>
                </div>

            </div>
            <div class="device__bottom">
                <div id="slider">
                    <div class="time">00:00</div>
                    <div class="duration"></div>
                    <br>
                    <div class="elapsed">
                    </div>
                </div>
                <div class="equaliser"></div>
                <div class="controls">
                    <button class="controls__round-button" id="previous-button">
                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.13672 5L9.5 0.5V9.5L3.13672 5ZM0.5 0.5H2.01172V9.5H0.5V0.5Z" />
                        </svg>
                        <span class="sr-only">Previous</span>
                    </button>
                    <button class="controls__round-button controls__round-button--large" id="play-button">
                        <div class="play">
                            <svg class="controls__play" width="14" height="18" viewBox="0 0 14 18" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.0195312 0.269531L13.7305 9L0.0195312 17.7305V0.269531Z" />
                            </svg>
                            <span class="sr-only">Play</span>
                        </div>
                        <div class="pause">
                            <svg width="16" height="18" viewBox="0 0 16 18" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M10.5195 0.269531H15.5V17.7305H10.5195V0.269531ZM0.5 17.7305V0.269531H5.48047V17.7305H0.5Z"
                                    fill="#728C98" />
                            </svg>
                            <span class="sr-only">Pause</span>
                        </div>
                    </button>
                    <button class="controls__round-button" id="next-button">
                        <svg aria-hidden="true" focusable="false" width="10" height="10" viewBox="0 0 10 10" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.98828 0.5H9.5V9.5H7.98828V0.5ZM0.5 9.5V0.5L6.86328 5L0.5 9.5Z" />
                        </svg>
                        <span class="sr-only">Next</span>
                    </button>
                </div>
            </div>
    </section>
    <script src="js/main.js"></script>
</body>

</html>
